import React, { memo } from "react"
import { addNumberAction, subNumberAction } from "./store/modules/counter"
import { shallowEqual, useDispatch, useSelector } from "react-redux"
import { changeMessageAction } from "./store/modules/message"

const Home = memo(() => {
    const state = useSelector((state) => ({ message: state.message.message }), shallowEqual)
    const dispatch = useDispatch()

    console.log("Home Render")
    function changeMessage() {
        dispatch(changeMessageAction("你好，世界"))
    }
    return (
        <div>
            {state.message}
            <button onClick={changeMessage}>改变文本</button>
        </div>
    )
})

const App = memo((props) => {
    const state = useSelector((state) => ({ count: state.counter.count }), shallowEqual)
    const dispatch = useDispatch()
    
    function numberHandle(num, isAdd = true) {
        if (isAdd) {
            dispatch(addNumberAction(num))
        } else {
            dispatch(subNumberAction(num))
        }
    }

    console.log("App Render")
    return (
        <div>
            <h2>count计数：{state.count}</h2>
            <button onClick={(e) => numberHandle(1)}>+1</button>
            <button onClick={(e) => numberHandle(-1, false)}>-1</button>
            <Home />
        </div>
    )
})

export default App
